<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="section_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<view class="relative">
					<image :src="icon1" mode="aspectFill" class="zhuanBox" :class="{'rotate':isRotate}"
						:style="{transform:`rotate(${angle}deg)`}" style="width:700rpx;height:700rpx;"></image>
					<image :src="icon2" mode="widthFix" @click="$noMultipleClicks(rotate)" class="an "
						style="width:160rpx;height:160rpx;"></image>
					<!-- </view> -->
					<!-- <view>1. 注册或未参与过此活动的用户</view>
					<view>2. 红包奖励直接到用户账号，可以用于商城购物</view>
					<view>3. 参与活动时，需要分享给好友一起参与</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	//生成随机数（下面也有一个）
	function rand(min, max) {
		return parseInt(Math.random() * (max - min + 1) + min);
	}
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				icon1: this.$https.assetsPath + '5b8534f937991dcc8809db3e0095000dee79a4d2.png',
				icon2: this.$https.assetsPath + '9474226a949c6f39dde2a92316487ca95ead3378.png',
				constants: {},
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "幸运抽奖",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				navbarHeigth: null,
				isRotate: false, //是否旋转
				prizeList: ['谢谢参与1', '谢谢参与2', '谢谢参与3', '谢谢参与4', '惊喜礼包', '新人红包'], //奖品列表，决定旋转角度
				angle: 0, //旋转角度
				noClick: true,
			};
		},
		onLoad() {},
		methods: {
			rotate() {
				if (this.isRotate) return;
				this.angle = 0;
				setTimeout(() => {
					let len = this.prizeList.length;
					// let num=rand(0,len-1);	//随机奖品，可以改成后端返回的。
					let num = 4; //指定奖品，可以改成后端返回的。
					let prize = this.prizeList[num];
					// let angle=360/8*num+rand(0,44);//不排除转到中间线
					// let angle=360/len*num+rand(4,40);//排除转到中间线
					let angle = 360 / len * num + rand(40, 80); //排除转到中间线
					this.angle = (8 * 360 + angle); //旋转圈数8 + 奖品角度
					console.log('奖品：', prize, num, angle, this.angle, len)
					this.isRotate = true;
					setTimeout(() => {
						this.isRotate = false;
						uni.showToast({
							title: prize,
							icon: 'none',
							duration: 3000
						})
					}, 5000)
				}, 300)
			}
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;

		.group_1 {
			background: url('https://oss.szsportscenter.cn/img/6654ca67327e1afb325b384e7c4ea605606c4ec1.png') 0rpx -15rpx no-repeat;
			background-size: 772rpx 845rpx;
			width: 100%;
			height: 100%;

			.section_1 {
				width: 100%;
				height: 100%;
				background: url('https://oss.szsportscenter.cn/img/6654ca67327e1afb325b384e7c4ea605606c4ec1.png') 100% no-repeat;
				background-size: 100% 100%;
				position: fixed;
				z-index: 9;

				.nav {
					position: relative;
					width: 100%;
					height: 100%;
				}

				.zhuan {
					position: absolute;
					/* top:50%; */
					top: 35%;
					left: 20%;
					transform: translate(-50%, -50%);
				}

				.zhuanBox {
					position: absolute;
					/* 	width: 100%;
					height: 100% ;*/
					top: 23%;
					left: 25rpx;
					transform: translate(-50%, -50%);
				}

				.an {
					position: absolute;
					top: 39%;
					left: 39%;
					z-index: 999;
					/* 	position:absolute;
					top:50%;
					left:50%;
					z-index: 999; */
					transform: rotate(0deg);
				}

				.an:active {
					transform: scale(0.95);
				}

				.rotate {
					/* animation: rotate 5s infinite linear; */
					/* animation-timing-function: ease-in-out; */
					/* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 0.9); */
					/* animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); */
					transform: rotate(3800deg);
					transition: transform 5s ease;
				}

				@keyframes rotate {
					0% {
						transform: rotate(0deg);
					}

					100% {
						/* transform: rotate(360deg); */
						transform: rotate(3800deg);
					}
				}

				.image_1 {
					width: 654rpx;
					height: 22rpx;
					margin: 33rpx 0 0 48rpx;
				}

				.nav-bar_1 {
					width: 743rpx;
					height: 91rpx;
					margin-top: 25rpx;

					.group_2 {
						height: 36rpx;
						width: 185rpx;
						margin: 34rpx 0 0 30rpx;

						.box_1 {
							width: 185rpx;
							height: 36rpx;

							.icon_1 {
								width: 20rpx;
								height: 36rpx;
							}

							.text_1 {
								width: 146rpx;
								height: 35rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 36rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin-top: 1rpx;
							}
						}
					}

					.applet-top-bar_1 {
						width: 150rpx;
						height: 55rpx;
						margin: 20rpx 24rpx 0 354rpx;
					}
				}

				.image-wrapper_1 {
					width: 717rpx;
					height: 158rpx;
					margin: 281rpx 0 46rpx 17rpx;

					.image_2 {
						width: 357rpx;
						height: 158rpx;
					}

					.image_3 {
						width: 357rpx;
						height: 158rpx;
					}
				}
			}
		}
	}
</style>